<template>
    <div class="collect">
      <!--<van-nav-bar title="我的收藏">
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>-->
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </form>
      <van-tabs class="collect-tabs" v-model="active" :border="false" sticky animated>
        <van-tab title="视频">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div class="collect-list">
                <div v-for="item in list" :key="item.id" class="collect-list__item" :style="`background-image: url(${item.thumb})`">
                  <div class="collect-list__like">
                    <van-icon name="like-o" />
                    <span>{{ item.like_num }}</span>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="图文">
          <div class="text1-2 text-center tip">功能暂未开发，敬请期待~</div>
        </van-tab>
      </van-tabs>
    </div>
</template>

<script>
export default {
    name: 'collect',
    data () {
        return {
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            active: 0,
            value: '',
            page: 0
        }
    },
    methods: {
        onLoad () {
            this.$http.user.videoCollect({ page: this.refreshing ? this.page = 1 : this.page += 1 }).then(({ code, data }) => {
                if (this.refreshing) {
                    this.list = []
                    this.refreshing = false
                }
                if (code === 200) {
                    if (data.total_page === data.current_page || data.total_page === 0) {
                        this.finished = true
                    }
                    if (data.current_page === 1) {
                        this.list = data.list
                    } else {
                        this.list = this.list.concat(data.list)
                    }
                }
                this.loading = false
            })
        },
        onRefresh () {
            // 清空列表数据
            this.finished = false

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true
            this.onLoad()
        },
        onSearch () {}
    }
}
</script>

<style lang="scss" scoped>
.collect {
  padding-bottom: 50px;
  .tip {
    line-height: 50px;
  }
  &-list {
    padding: 0 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    &__item {
      position: relative;
      height: 120px;
      background-size: cover;
      border-radius: 6px;
    }
    &__like {
      display: flex;
      align-items: center;
      color: #ffffff;
      position: absolute;
      bottom: 5px;
      left: 5px;
      i {
        margin-right: 8px;
      }
    }
  }
}
</style>
